<script lang="ts" setup>
import { ref } from 'vue';

import { toast } from '@/utils/toast';
import API from '@/api';
import { useUserStore } from '@/store/user';

const userStore = useUserStore();

const isLoginDialogVisible = ref(false);
const isLogoutDialogVisible = ref(false);
const formData = ref({
  username: 'admin',
  password: 'admin',
});

function showLoginDialog() {
  isLoginDialogVisible.value = true;
}

async function submitLogin() {
  const res = await API.login('test', '123');
  console.log('res', res);
  if (res.code === 0) {
    toast({
      type: 'success',
      message: 'Login success',
    });
    const userRes = await API.getUser();
    userStore.updateUser(userRes.data);

    isLoginDialogVisible.value = false;
  } else {
    toast({
      type: 'error',
      message: 'Login Fail',
    });
  }
}

function logout() {
  isLogoutDialogVisible.value = true;
}

function logoutConfirm() {
  userStore.updateUser(null);
  isLogoutDialogVisible.value = false;
}
</script>

<template>
  <div class="user-info">
    <el-button v-if="userStore.isLogin" @click="logout">Logout</el-button>
    <el-button v-else id="login-btn" @click="showLoginDialog">
      Login
    </el-button>
  </div>

  <!-- login dialog -->
  <el-dialog id="login-dialog" v-model="isLoginDialogVisible" title="Login">
    <el-form :model="formData">
      <el-form-item label="Username">
        <el-input v-model="formData.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Password">
        <el-input
          v-model="formData.password"
          autocomplete="off"
          type="password"
          show-password
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isLoginDialogVisible = false"> Cancel </el-button>
        <el-button type="primary" @click="submitLogin"> Confirm </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- logout dialog -->
  <el-dialog v-model="isLogoutDialogVisible" title="Logout">
    <span>Do you confirm to logout?</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isLogoutDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="logoutConfirm">Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.user-info {
  display: flex;

  .user {
    margin-right: 20px;
    line-height: 32px;
  }
}
</style>
